<template>
  <div class="app-container">
    <div class="app-form">

      <ele-form
        v-model="formData"
        v-bind="formConfig"
        :request-fn="handleRequest"
        @request-success="handleRequestSuccess"
      >
        <template v-slot:form-footer>
          <el-col v-if="showNum===1" :span="24">
            <el-form-item label="代金券金额">
              <el-input
                v-model="formData.cash"
                placeholder="请输入代金券金额"
                type="number"
              />
            </el-form-item>
          </el-col>
          <el-col v-if="showNum===2 || showNum===3 || showNum===5" :span="24">
            <el-form-item label="消费时长(小时)">
              <el-input
                v-model="formData.max_time"
                placeholder="请输入消费时长"
                type="number"
              />
            </el-form-item>
          </el-col>
          <el-col v-if="showNum===4" :span="24">
            <el-form-item label="折扣券折扣">
              <el-input
                v-model="formData.discount"
                placeholder="请输入折扣券折扣"
                type="number"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="可使用房间">
              <el-input
                v-model="houseName"
                placeholder="请选择可使用房间"
                :disabled="true"
              >
                <template slot="append">
                  <el-button
                    class="solid-right"
                    style="color: #409eff"
                    @click.prevent="showgiveCoupon()"
                  >浏览</el-button>
                  <span class="padding-lr-xs">|</span>
                  <el-button
                    style="color: #f56c6c"
                    @click.prevent="houseName = ''
                                    formData.use_hourse = 0
                                    useHourseLis=[]"
                  >清除</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </template></ele-form>
      <el-dialog
        :close-on-click-modal="false"
        title="选择可使用房间"
        :visible.sync="giveHouse"
        width="80%"
      >
        <selectHouse :checheds="formData.use_hourse" @selsectHouse="selsectHouse" />
        <span slot="footer" class="dialog-footer" />
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showNum: 1,
      useHourseLis: [],
      houseName: '',
      giveHouse: false,
      formData: {
        type: 1,
        enable_week: 1,
        use_hourse_name: '',
        use_hourse: 0,
        meal_type: 1
      },
      formConfig: {
        formDesc: {
          name: {
            type: 'input',
            label: '卡券名'
          },
          num_sort: {
            type: 'input',
            label: '排序',
            attrs: {
              type: 'number'
            }
          },
          meal_type: {
            type: 'radio',
            label: '默认套餐类型',
            isOptions: true,
            options: [
              {
                text: '1小时',
                value: 1
              },
              {
                text: '2小时',
                value: 2
              },
              {
                text: '4小时',
                value: 4
              }
            ]
          },
          type: {
            type: 'radio',
            label: '卡券类型',
            isOptions: true,
            options: [
              {
                text: '代金券',
                value: 1
              },
              {
                text: '时长卡',
                value: 2
              },
              {
                text: '次卡',
                value: 3
              },
              {
                text: '折扣券',
                value: 4
              },
              {
                text: '体验券',
                value: 5
              }
            ],
            on: {
              input: (data) => {
                console.log(data)
                this.showNum = data
              }
            }
          },
          explain: {
            type: 'input',
            label: '卡券说明'
          },
          price: {
            type: 'input',
            label: '卡券金额(元)',
            attrs: {
              type: 'number'
            }
          },
          use_start: {
            type: 'time',
            label: '时间限制-开始时间',
            attrs: {
              pickerOptions: {
                start: '00:30',
                step: '00:30',
                end: '24:00'
              }
            }
          },
          use_end: {
            type: 'time',
            label: '时间限制-结束时间',
            attrs: {
              pickerOptions: {
                start: '00:30',
                step: '00:30',
                end: '24:00'
              }
            }
          },
          enable_start: {
            type: 'datetime',
            label: '有效期开始时间',
            attrs: {
              valueFormat: 'yyyy-MM-dd HH:mm:ss'
            }
          },
          coupon_img: {
            label: '卡券主图',
            type: 'image-uploader' // 只需要在这里指定为 image-uploader 即可
            // attrs: {
            //   multiple: true,
            //   limit: 10
            // }
          },
          background: {
            label: '卡券背景',
            type: 'image-uploader'// 只需要在这里指定为 image-uploader 即可
          },
          enable_end: {
            type: 'datetime',
            label: '有效期结束时间',
            attrs: {
              valueFormat: 'yyyy-MM-dd HH:mm:ss'
            }
          },
          // use_num: {
          //   type: 'input',
          //   label: '已使用次数',
          //   attrs: {
          //     disabled: true
          //   }
          // },
          // max_time: {
          //   type: 'input',
          //   label: '消费时长(小时)',
          //   attrs: {
          //     type: 'number'
          //   }
          // },
          // enable_week: {
          //   type: 'select',
          //   label: '适用星期',
          //   isOptions: true,
          //   options: [
          //     {
          //       text: '星期一',
          //       value: 1
          //     },
          //     {
          //       text: '星期二',
          //       value: 2
          //     },
          //     {
          //       text: '星期三',
          //       value: 3
          //     },
          //     {
          //       text: '星期四',
          //       value: 4
          //     },
          //     {
          //       text: '星期五',
          //       value: 5
          //     },
          //     {
          //       text: '星期六',
          //       value: 6
          //     },
          //     {
          //       text: '星期七',
          //       value: 7
          //     }
          //   ]
          // },
          third_party: {
            type: 'input',
            label: '第三方编号'
          },
          // all_num: {
          //   type: 'input',
          //   label: '总发放量',
          //   attrs: {
          //     type: 'number'
          //   }
          // },
          max_num: {
            type: 'input',
            label: '最多可购买数量',
            attrs: {
              type: 'number'
            }
          }
          // discount: {
          //   type: 'input',
          //   label: ' 折扣券折扣',
          //   attrs: {
          //     type: 'number'
          //   }
          // },
          // cash: {
          //   type: 'input',
          //   label: '代金券金额',
          //   attrs: {
          //     type: 'number'
          //   }
          // }
        },
        order: [
          'name',
          'num_sort',
          'type',
          'meal_type',
          'explain',
          'price',
          'background',
          'coupon_img',
          'use_start',
          'use_end',
          'enable_start',
          'enable_end',
          // 'use_num',
          // 'max_time',
          // 'enable_week',
          'third_party',
          // 'all_num',
          'max_num'
          // 'discount',
          // 'cash'
        ]
      }
    }
  },
  methods: {
    handleRequest(data) {
      // marketCreate(data).then((response) => {
      //   if (response.code === 200) {
      //     this.$message.success(response.message)
      //     this.closePage()
      //   } else {
      //     this.$message.error(response.message)
      //   }
      // })
      return Promise.resolve()
    },
    handleRequestSuccess() {
    },
    showgiveCoupon() {
      this.giveHouse = true
    },
    selsectHouse(row) {
      console.log(row)
      const titles = []
      const giveCouponIds = []
      row.forEach((row, index) => {
        giveCouponIds.push(row.id)
        titles.push(row.name)
      })
      this.houseName = titles.join(',')
      this.formData.use_hourse = giveCouponIds.join(',')
      this.giveHouse = false
    },
    closePage() {
      this.$store.dispatch('app/closePage', {
        vm: this,
        fromName: this.$route.name,
        toName: 'diandi-tea-marketing-coupon-marketing-coupon-marketing-index',
        params: {}
      })
    }
  }
}
</script>
